<template>
  <div class="prefixCls relative" style="width: 100%">
    <el-input v-model="innerValueRef" v-bind="$attrs" type="password" show-password @change="handleChange"
              style="width: 100%">
      <template #[item]="data" v-for="item in Object.keys($slots)">
        <slot :name="item" v-bind="data || {}"></slot>
      </template>
    </el-input>
    <div class="prefixCls-bar">
      <div class="prefixCls-bar--fill" :data-score="getPasswordStrength"></div>
    </div>
  </div>
</template>

<script setup lang="ts" name="StrengthMeter">
import {verifyPasswordStrength} from '/@/utils/toolsValidate';

const props = defineProps({
  value: {
    type: String,
  },
  showInput: {
    type: Boolean,
    default: () => {
      return true;
    },
  },
  disabled: {
    type: Boolean,
  },
});

const emit = defineEmits(['score', 'change', 'update:value']);

// 计算密码强度
const getPasswordStrength = computed(() => {
  const {disabled} = props;
  if (disabled) return -1;
  const innerValue = unref(innerValueRef);
  const score = innerValue ? verifyPasswordStrength(innerValue) : -1;
  emit('score', score);
  return score;
});

const innerValueRef = ref();

const handleChange = (e: any) => {
  innerValueRef.value = e;
};

watchEffect(() => {
  innerValueRef.value = props.value || '';
});

watch(
    () => unref(innerValueRef),
    (val) => {
      emit('update:value', val);
      emit('change', val);
    }
);
</script>

<style scoped lang="scss">
.prefixCls {
  &-bar {
    position: relative;
    height: 6px;
    margin: 10px auto 6px;
    background-color: grey;
    border-radius: 6px;

    &::before,
    &::after {
      position: absolute;
      z-index: 10;
      display: block;
      width: 33%;
      height: inherit;
      background-color: transparent;
      border-color: white;
      border-style: solid;
      border-width: 0 5px;
      content: '';
    }

    &::before {
      left: 33%;
    }

    //
    //&::after {
    //	right: 33%;
    //}

    &--fill {
      position: absolute;
      width: 0;
      height: inherit;
      background-color: transparent;
      border-radius: inherit;
      transition: width 0.5s ease-in-out, background 0.25s;

      &[data-score='1'] {
        width: 33%;
        background-color: var(--el-color-danger);
      }

      &[data-score='2'] {
        width: 67%;
        background-color: var(--el-color-warning);
      }

      &[data-score='3'] {
        width: 100%;
        background-color: var(--el-color-success);
      }
    }
  }
}
</style>
